<template>
  <div class="selected_content_ct">
    <div class="selected_title_te">
      <p>精选榜</p>
    </div>
    <div
      class="selected_body_by"
      v-for="(item, index) in selectedList"
      :key="index"
    >
      <div class="selected_top_tp">
        <span>{{ item.updateFrequency }}</span>
      </div>
      <div class="selected_box_bx">
        <div class="selected_box_left_lt">
          <img :src="item.coverImgUrl" alt="" class="selectbox_img_ig" />
        </div>
        <div class="selected_box_right_rt">
          <div>
            <span>{{ item.tracks[0].first }}</span>
            <span> - {{ item.tracks[0].second }}</span>
          </div>offi
          <div>
            <span>{{ item.tracks[1].first }}</span>
            <span> - {{ item.tracks[1].second }}</span>
          </div>
          <div>
            <span>{{ item.tracks[2].first }}</span>
            <span> - {{ item.tracks[2].second }}</span>
          </div>
        </div>
      </div>
      <div class="selected_buttom_bm">
        <p>{{ item.description }}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedList: [],
    };
  },
  created() {
    this.getselectedList();
  },
  methods: {
    getselectedList() {
      this.$request("get", "/toplist/detail").then((res) => {
        console.log("请求官方榜单数据", res);
        this.selectedList = res.list.slice(0, 4);
        console.log("截取后的精选榜单数据", this.selectedList);
      });
    },
  },
};
</script>
<style scoped>
.selected_content_ct {
  margin: 10px 20px;
}
p {
  text-align: left;
  font-weight: 600;
}
.selectbox_img_ig {
  width: 80px;
  height: 80px;
  border-radius: 1rem;
}
.selected_body_by {
  background-color: white;
  border-radius: 1rem;
  margin: 10px 0;
  padding: 10px;
}
.selected_top_tp {
  text-align: right;
}
.selected_top_tp > span {
  font-size: 10px;
  color: rgb(155, 155, 155);
}
.selected_box_bx {
  display: flex;
}
.selected_box_right_rt > div {
  margin-left: 14px;
  text-align: left;
}
.selected_box_right_rt > div > span {
  line-height: 29px;
  font-size: 14px;
}
.selected_box_right_rt > div > span:nth-child(2n + 2) {
  color: rgb(177, 177, 177);
}
.selected_box_right_rt > div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.selected_buttom_bm > p {
  color: rgb(82, 82, 82);
  font-weight: 300;
  font-size: 14px;
  height: 20px;
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /*行数*/
}
</style>